<template>
  <div>
    <div class="pink" v-if="flag">
      <button @click="godapai()">1s后跳转到大牌页面</button>
    </div>
    <div
      v-else
      class="center"
      @touchstart="start($event)"
      @touchmove="move($event)"
      @touchend="end($event)"
      :style="{ top: top + 'rem' }"
    >
      <Address /><Search id="search" /><Swiperloop /><Tuijian />
    </div>
    <Foo />
  </div>
</template>

<script>
import Address from "./Homecontent/address.vue";
import Search from "./Homecontent/search.vue";
import Swiperloop from "./Homecontent/swiperloop.vue";
import Tuijian from "./Homecontent/tuijian.vue";

export default {
  watch: {
    flag(newf) {
      if (newf) {
        setTimeout(() => {
          // 判断的作用,解决重复访问路由的bug
          if (this.bool == false) {
            this.$router.replace("/erlou");
          }
        }, 1000);
      }
    },
  },
  data() {
    return {
      h: 0,
      top: 0,
      starr: 0,
      flag: false,
      bool: false,
    };
  },
  methods: {
    godapai() {
      this.bool = true;
      this.$router.push("/erlou");
    },
    start(e) {
      this.starr = e.targetTouches[0].pageY;
      console.log(e.targetTouches[0].pageY);
    },
    move(e) {
      let t = e.targetTouches[0].pageY;
      let c = t - this.starr;
      if (c > 0) {
        this.top = parseInt(c) / 100;
        console.log(this.top);
      }
    },
    end() {
      if (this.top < 1.4) {
        this.top = 0;
        this.flag = false;
      } else {
        this.flag = true;
      }
    },
  },
  components: {
    Address,
    Search,
    Swiperloop,
    Tuijian,
  },
};
</script>

<style>
.center {
  margin-left: 0.08rem;
  margin-right: 0.08rem;
  position: relative;
  left: 0;
}
#search {
  position: sticky;
  top: 0;
  z-index: 10;
}
</style>